﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>
        .ant-select-arrow, .ant-select-clear {
            position: absolute;
            right: 10px;
        }

        .iTitle {
            font-weight: 600;
            font-size: 16px;
            display: flex;
            width: 100%;
            align-items: center;
            margin-left: 20px;
        }

            .iTitle::before {
                content: "";
                margin-right: 10px;
                display: inline-block;
                width: 4px;
                height: 20px;
                background: #0064e5;
            }

        .t {
            width: 100%;
            margin: 10px auto;
            color: black !important;
        }
        /* 确保表格容器内的所有内容居中 */
       #myTableContainer .center-table {
            text-align: center;
        }

            /* 使表格本身居中 */
           #myTableContainer .center-table table {
                display: inline-block;
                margin: 0 auto;
            }

            /* 居中表头文本 */
           #myTableContainer .center-table th {
                text-align: center;
                
            }

        /* 确保表格容器内的所有内容居中 */
       #myTableContainer .center-table {
            text-align: center;
        }

            /* 使表格本身居中 */
          #myTableContainer  .center-table table {
                display: inline-block;
                margin: 0 auto;
            }

            /* 居中表头文本 */
            #myTableContainer .center-table th,
           #myTableContainer  .center-table td {
                text-align: center;           
            }

            /* 设置表格标题的样式 */
      #myTableContainer caption {
        width:100%;
        display: inline-block;
        font-size: 40px;
        font-weight: bold;
        color: black;
        box-sizing: border-box;
        padding-bottom: 46px;
        text-align: center;
        margin-bottom: 10px;
            }

#myTableContainer{
    position: absolute;
    left: -99999;
    top: 0;
}
        /* 如果你也想让表格单元格的内容居中 */
     #myTableContainer  thead th{
          font-size: 30px;
          background: #999;
          color: white;
          padding-bottom: 32px!important;box-sizing: border-box;
}
      #myTableContainer  .center-table td {
            text-align: center;
            font-size: 28px;
            padding-bottom: 30px!important;box-sizing: border-box;
        }
    </style>
}
<div id="PerformanceResult" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">
            <header class="px-5 box-border">
                <div class="flex items-center">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10"> <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="PerformanceResultParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div> <span class="text-[]">首页<span class="mx-2">/</span>履职考核<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">结果查询</span> </span>  </div>
                </div>
                <div class="w-full h-[440px] text-[13px] rounded-lg mb-6 bg-white box-border" v-if="PerformanceResultParams.isLeader.value==true">
                    <div style="display: flex; justify-content: space-between; width: 100%; box-sizing: border-box;margin:12px 0">
                        <div class="font-bold iTitle">各部门考评分总览</div>
                        <div style="width:1900px;overflow-x:scroll">
                            <a-form layout="inline" style="margin-top:12px" :model="PerformanceResultParams.EvaluationForm.value">
                                <div style="display:flex;align-items:center">
                                    <a-form-item label="考核表">
                                        <a-cascader v-on:change="PerformanceResultParams.Cchange" :show-search="{ filter:PerformanceResultParams.filter }" placeholder="请选择考核表" v-model:value="PerformanceResultParams.EvaluationForm.value.form" :options="PerformanceResultParams.formList.value" />
                                    </a-form-item>
                                    <a-form-item label="状态">
                                        <a-select v-on:change="PerformanceResultParams.Cchange" placeholder="请选择状态" :options="PerformanceResultParams.statusList.value" allow-clear v-model:value="PerformanceResultParams.EvaluationForm.value.status"
                                                  style="width: 140px">
                                        </a-select>
                                    </a-form-item>
                                    <a-form-item label="办公类型">
                                        <a-select v-on:change="PerformanceResultParams.Cchange" placeholder="办公类型" :options="PerformanceResultParams.DepartmentTypeList.value" allow-clear v-model:value="PerformanceResultParams.EvaluationForm.value.DepartmentTypeId"
                                                  style="width: 140px">
                                        </a-select>
                                    </a-form-item>
                                </div>

                            </a-form>

                        </div>
                    </div>

                    <div id="ttmain" v-if="PerformanceResultParams.echartData.value" :key="JSON.stringify(PerformanceResultParams.echartData.value)" ref="main" style="width: 100%;margin-top:10px; height:360px;background:white;"></div>
                </div>

                <a-tabs style="height:100%;width:100%;padding:0 20px;box-sizing:border-box" v-model:active-key="PerformanceResultParams.cIndex.value" class="w-full mt-10 h-[48px] text-[13px] rounded-lg  bg-white">
                    <a-tab-pane v-for="(e,i) in PerformanceResultParams.tabList.value" :key="e.value" :tab="e.label">
                        <div v-if="!PerformanceResultParams.isLeader.value">
                            <div class="mb-5 text-[16px] font-bold text-black">筛选条件</div>

                            <a-form layout="inline"
                                    :model="PerformanceResultParams.queryParams.value">
                                <a-form-item label="年份">
                                    <a-select placeholder="请选择年份" :options="PerformanceResultParams.yearsList.value" allow-clear v-model:value="PerformanceResultParams.queryParams.value.year"
                                              style="width: 120px">


                                    </a-select>
                                </a-form-item>
                                <a-form-item>
                                    <a-col><a-button v-on:click="PerformanceResultParams.getTableList(true)" type="primary">查询</a-button></a-col>
                                </a-form-item>
                            </a-form>
                        </div>
                        <div style="width: 100%;" id="myTableContainer"></div>
                        <div class="flex w-full mt-10">
                            <a-card :bordered="true" class="w-full h-full">
                                <template #title>
                                    <div class="w-full flex justify-between items-center">
                                        <div style="display:flex;justify-content:space-between;width:100%;">  <div class="flex items-center"><div>结果列表：</div> <a-tag class="ml-4" color="#108ee9">总数:{{PerformanceResultParams.pagination.value.total}}</a-tag> </div> <a-button v-on:click="PerformanceResultParams.onexport" type="primary">导出</a-button> </div>


                                    </div>



                                </template>
                                <div style="height:600px;overflow-y:scroll">
                                    <a-table :pagination="false" :loading="PerformanceResultParams.pagination.value.loading" :data-source="PerformanceResultParams.isLeader.value? PerformanceResultParams.dataSource.value: PerformanceResultParams.odataSource.value" :columns="PerformanceResultParams.isLeader.value? PerformanceResultParams.columns.value: PerformanceResultParams.ocolumns.value">

                                    </a-table>

                                </div>





                            </a-card>

                        </div>


                    </a-tab-pane>
                </a-tabs>
            </header>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script src="~/bussiness/js/pg/Performance/html2canvas.js"></script>
    <script type="module">
        import Composition from '../../bussiness/js/pg/Performance/result.js?v=@DateTime.Now.ToString("yyyyMMddHHmm")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'

        singalApp('PerformanceResult', Composition, localeValues)
    </script>
}
